<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入element-plus样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <!-- 引入element-plus组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

    <div id="app">
        <div>
            <el-button type="primary" @click="dialogVisible=true">新增</el-button>
            <el-table :data="list" style="width: 100%;display: flex;">
                <el-table-column prop="id" label="id" width="120">
                </el-table-column>
                <el-table-column fixed prop="kunName" label="名称"></el-table-column>
                <el-table-column prop="ikun_year" label="年限"></el-table-column>
                <el-table-column prop="ikun_position" label="职位"></el-table-column>
                <el-table-column prop="ikun_pet_phrase" label="口语"></el-table-column>
                <el-table-column fixed="right" label="Operations">
                    <template v-slot="scope">
                        <el-button link type="primary" size="small" @click="submit(scope.row)">
                            修改
                        </el-button>
                        <el-button link type="primary" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
                <el-form :model="form" label-width="auto" style="max-width: 600px">
                    <el-form-item label="名称">
                        <el-input v-model="form.kunName" />
                    </el-form-item>
                    <el-form-item label="年限">
                        <el-input v-model="form.ikun_year" />
                    </el-form-item>
                    <el-form-item label="职位">
                        <el-input v-model="form.ikun_position" />
                    </el-form-item>
                    <el-form-item label="口语">
                        <el-input v-model="form.ikun_pet_phrase" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit">确定</el-button>
                    </el-form-item>

            </el-dialog>
        </div>
    </div>
    <script>
        const { createApp, ref, onMounted, reactive } = Vue
        const { ElMessage, ElMessageBox } = ElementPlus
        createApp({
            setup() {
                const message = ref('Hello vue!')
                const list = ref([])
                const dialogVisible = ref(false)
                const form = reactive({
                    id: null,
                    kunName: null,
                    ikun_year: null,
                    ikun_position: null,
                    ikun_pet_phrase: null

                })
                onMounted(() => {
                    getList()
                })
                function getList() {
                    axios({
                        url: 'http://localhost:90/kun/getKunList',
                        method: 'get',
                    }).then(res => {
                        list.value = res.data.data
                        console.log(list.value, 'data.value');
                    })
                }
                function handleDelete(row) {
                    ElMessageBox
                        .confirm('是否确认删除字典编号为"' + row.id + '"的数据项？')
                        .then(function () {
                            return axios({
                                url: 'http://localhost:90/kun/removekun',
                                method: 'get',
                                params: {
                                    id: row.id
                                }
                            }).then(res => {
                                list.value = res.data.data
                                console.log(list.value, 'data.value');
                            })
                        })
                        .then(() => {
                            getList()
                        })
                        .catch(() => { });
                }
                function submit() {
                    axios({
                        url: 'http://localhost:90/kun/addKunList',
                        method: 'post',
                        data: form
                    }).then(res => {
                        ElMessage({
                            message: '成功',
                            type: 'success',
                        })
                        dialogVisible.value = false
                        getList()
                    })
                }
                return {
                    message,
                    list,
                    handleDelete,
                    dialogVisible,
                    form,
                    submit
                }
            }
        }).use(ElementPlus).mount('#app')
    </script>

</body>

</html>